<template>
    <div>
        <el-aside :width="asideWidth + 'px'"
                  style="height: 100vh; overflow: hidden; box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
            <!-- 菜单  -->
            <el-menu :default-openeds="['1', '2']"
                     :collapse="isCollapse"
                     :collapse-transition="false"
                     background-color="#AA6B37"
                     text-color="#fff"
                     style="height: 100vh; overflow-x: hidden"
                     active-text-color="yellow"
                     router>
                <!-- logo  -->
                <div class="logo" style="height: 60px; line-height: 60px; background-color: #AA6B37;">
                    <i class="el-icon-upload" style="position: relative; top: 3px; left: 18px; color: #fff; line-height: 60px; font-size: 30px"></i>
                    <b style="margin-left: 30px; font-family: Serif Georgia,serif; color: #fff"> S.H.I.T. Cloud</b>
                </div>
                <!-- 动态菜单渲染  -->
                <div v-for="item in menus" :key="item.id">
                    <div v-if="item.path">
                        <el-menu-item :index="item.path">
                            <i style="color: white" :class="item.icon"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                    <div v-else>
                        <el-submenu index="">
                            <template slot="title"><i style="color: white" class="el-icon-menu"></i></template>
                            <span slot="title">系统管理</span>
                            <div v-for="child in item.children" :key="child.id">
                                <el-menu-item :index="child.path">
                                    <i style="color: white" :class="child.icon"></i>
                                    <template slot="title">{{ child.name }}</template>
                                </el-menu-item>
                            </div>
                        </el-submenu>
                    </div>
                </div>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        props: {
            isCollapse: Boolean,
            asideWidth: Number,
            user: Object
        },
        data () {
            return {
                // 父与子
                menus: this.user.menuList
            }
        }
    }
</script>

<style scoped>

</style>